<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<head>
	<meta charset="UTF-8">
	<title>员工</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui/layui.js"></script>
	<style>
.layui-table tbody tr:hover td{
 	cursor: pointer;
}
::-webkit-scrollbar-thumb {
  background:#a2a2a2; 
  border-radius: 10px;
  height:50%;
}
::-webkit-scrollbar{width:6px;}
	body{
		overflow-y: scroll;
	} 
	</style>
</head>
<body style="overflow-y: scroll;">
	<div class="kb-out-box">
		<div class="kb-content">
			<nav class="nav-container-bg f-left">
				<div class="nav-container-content">
					<header class="nav-header clear-fix">
						<h2 class='header-title'>组织架构</h2>
						<shiro:hasPermission name="dept:create">
							<div class='nav-header-btn f-right' id="add-dept-employee"><span class="add-btn">添加部门</span></div>
						</shiro:hasPermission>
					</header>
					<div class="section">
						
					</div>
				</div>
			</nav>
			<section class="nav-section-container-bg f-right">
				<header class="nav-header">
					<h2 class="nav-section-header-title">
						<span id="name-tit">全公司</span>
						<div class="f-right">
							<shiro:hasPermission name="user:create">
								<button class="layui-btn layui-btn-normal layui-btn-radius" id="add-employee"><i class="layui-icon">&#xe654;</i>添加新员工</button>	
							</shiro:hasPermission>
						</div>
				    </h2>					
					<div class="color-nine">
						<i class="layui-icon">&#xe66f;</i><span id="ren"></span>人
					</div>
				</header>
				<div class="nav-section-content-container">
					<div style="height: 100%">
						<div class="layui-row" class="user_list">
							<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> 
						</div>
					</div>
					<script id="userSex" type="text/html">
  						{{# if(d.userSex === 1 ){ }}
							男
						{{# }else{ }}
							女
						{{# } }}
					</script>
					<script id="enabledState" type="text/html">
  						{{# if(d.enabledState === true ){ }}
							<span data-id="{{d.id}}" class="certain-btn-ms" style="background-color: rgb(115, 187, 75);">已经激活</span>
						{{# }else{ }}
							<span data-id="{{d.id}}" class="certain-btn-ms">未激活中</span>
						{{# } }}
					</script>
					<script id="Bar" type="text/html">
	  					<div class="cop-wrap">
							<a  href="javascript:void(0)" onclick="editUser('{{d.id}}',event)"><i class="layui-icon icon-settings">&#xe642;</i></a>
							<div class="kb_dropdown">
								<a class="kb_dropdown__trigger " href="javascript:void(0)">
									<i class="layui-icon icon-delete" style="padding-left:10px">&#xe640;</i>
								</a>
								<div class="kb_dropdown__content " style="left: 50%; transform: translateX(-80%);">
									<ul class="task-type">
										<!--<li><span>离职</span></li>-->
										<li onclick="editDel('{{d.id}}',event)"><span>删除</span></li>
									</ul>
								</div>
							</div>
						</div>
					</script>
					<script id="headerPic" type="text/html">
						{{# if(d.sysAttachmentPortrait!=null){ }}
							<img src="{{d.sysAttachmentPortrait.filePath}}{{d.sysAttachmentPortrait.id}}{{d.sysAttachmentPortrait.fileType}}" style="width: 40px; height: 40px; border-radius: 100px;">
						{{# }else{ }}
							<span class="dotted" style="background:#da6068">{{d.userName.substr(0,1)}}</span>
						{{# } }}
  						
					</script>
					<script id="Name" type="text/html">
						{{# if(d.orgDept!=null){ }}
							{{d.orgDept.foldername}}  
						{{# }else{ }}	
							无
						{{# } }}			
					</script>
					
				</div>
			</section>
		</div>
	</div>
	
</body>
<script>
var table;
$(function(){
	//alert(1)
layui.use(['table','layer'], function(){
	table = layui.table,layer=layui.layer;
	//方法级渲染
	table.render({
		id:'user',
	    elem: '#LAY_table_user',
	    url: '/system/org/user/listdata',
	    cols: [[
	      //{checkbox: true, fixed: true},
	      {field:'header',toolbar:'#headerPic', align:'left', title: '',width:'8%'}
	      ,{field:'userName', align:'left', title: '姓名',width:'10%'}
	      ,{field:'userSex',toolbar: '#userSex', align:'left', title: '性别',width:'5%'}
	      ,{field:'phoneNumber', align:'left', title: '手机号',width:'15%'}
	      ,{field:'deptName', align:'left', title: '部门',width:'28.2%'}
	      ,{field:'enabledState',toolbar: '#enabledState', align:'center', title:'状态',width:'15%' }
	      ,{ field:'Bar', align:'left', toolbar: '#Bar',width:'11%'}
	    ]]
	    ,page: true
	    ,done: function(res, curr, count){
	        $("#ren").text(count);
	    }
	});
	
	//添加部们
	$("#add-dept-employee").on("click",function(){
		parent.layer.open({
		  type: 2, 
		  title:"添加部门",
		  area: ['650px','300px'],
	      shade: [0.6, '#010101'],
	      zIndex:800,
		  content:"/system/org/dept/add" , //这里content是一个普通的String
		  end: function () {
			 runAsync("/system/org/dept/listdata").then(function(data){//确保拿到数据后渲染导航
				　　renderNav(data);
			 });		  
	      }
		});		
	})
	//添加新员工
	$("#add-employee").on("click",function(){
		parent.layer.open({
		  type: 2, 
		  title:"添加新员工",
		  area: ['650px','90%'],
	      shade: [0.6, '#010101'],
		  content:"/system/org/user/add" , //这里content是一个普通的String
		  end: function () {
			  table.reload('user');
			  tableBtnOpt();
		  }
		});	
		
	})
	/*  点击删除查元素基于table*/
	 tableBtnOpt()
});
		runAsync("/system/org/dept/listdata").then(function(data){
			　　renderNav(data)
		});
		//renderNav("/system/org/dept/listdata");//渲染左侧导航
		//清除侧边和table弹框
		$("body").on('click',function(){
			$('.kb_dropdown').removeClass('kb_dropdown--active');
			$(".user_list .kb_dropdown__content").hide()
			
		})
		//左侧侧边栏list的点击事件,添加类名
		$('.section').on("click",'.tree-view_item',function(){
			var viewitem=$(this);
			clearTreeActive(viewitem);
			tableBtnOpt();
		})
		//左侧侧边栏设置的点击事件
		$('.section').on("click",'i',function(){
			var objI=$(this),title=$(objI).parent('.tree-view_item'),subNext=$(objI).parent('.tree-view_item').next('.tree-view');
			if(!objI.hasClass('right')){
				$(objI).addClass('right');
				$(subNext).hide(500);				
			}else{
				$(objI).removeClass('right');
				$(subNext).show(500);
				
			}
			clearTreeActive(title);
			if(objI.hasClass('icon-settings')){
				var pCont=$(objI).parent().parent('.kb_dropdown')
				if($(pCont).hasClass('kb_dropdown--active')){
					$(pCont).removeClass('kb_dropdown--active')
				}else{
					$(pCont).addClass('kb_dropdown--active')
				}
			};
			tableBtnOpt();
			return false;
		})	
})
function createTree(jsons, pid) {
    if (jsons != null) {
        var navBlock = `<div class="tree-view">`;
        for (var i = 0; i < jsons.length; i++) {
        	var padN=30*1;
        	var icon="";
            if (jsons[i].parentfolderid == pid) {
            	var len=jsons[i].folderid.length*1/3;
            	padN += 18*len;
            	if(jsons[i].subordinate>0){
            		icon='<i class="layui-icon icon-arrow_drop_down_circle layui-icon-down"></i>';
            	}
                navBlock += `<div class="tree-view_item" data-id="`+ jsons[i].id + `" style="padding-left:` +padN +`px" >`
	                +icon
	                +`<div class="tree-view_content">`
	               		+ `<nobr class="node">` + jsons[i].foldername +`</nobr>`
	                	+` <div class="kb_dropdown ">`
	                	 +	`<a class="kb_dropdown__trigger " href="#dropdown-trigger"><i class="layui-icon icon-settings">&#xe614;</i></a>`
	                	 	+`<div class="kb_dropdown__content ">`
								+`<ul class="section-option" style="left: 160px;">`
									+`<li onclick=add("`+jsons[i].id+`")><i class="layui-icon">&#xe631;</i>新建下级部门</li>`
									+`<li onclick=upd("`+jsons[i].id+`")><i class="layui-icon">&#xe642;</i>修改部门</li>`
									+`<li onclick=del("`+jsons[i].id+`")><i class="layui-icon">&#xe640;</i>删除</li></ul>`
	                	 	+`</div>`
	                	+ `</div>`
	                +`</div>`
               + `</div>`;
                navBlock += createTree(jsons, jsons[i].id);
            }
        }
        navBlock += "</div>";
    }  
    return navBlock;
}
//封装获取数据
function runAsync(url){
　　var def = $.Deferred();
　	var url=url || "/system/org/dept/listdata";
	jQuery.ajax({
        type:"post",
        async:false,
        url:url,
        dataType:"json",
        data:{},
        success:function(data){
        	def.resolve(data.data);
        }
      })
　　//可以在外部改变状态
　　return def.promise(); //返回的deferred对象
}
function renderNav(data){
	var strAll = createTree(data, 'root');
	var sectionText=`<div class="tree-view">`
	+`<div class="tree-view_item" data-id="all" style="padding-left: 30px;">`
			+`<i class="layui-icon icon-arrow_drop_down_circle layui-icon-down"></i>`
			+`<div class="tree-view_content">`
				+`<nobr class="node">全公司</nobr>`
				+`<div class="kb_dropdown ">`
              	 		+`<a class="kb_dropdown__trigger " href="#dropdown-trigger"><i class="layui-icon icon-settings">&#xe614;</i></a>`
               	 	+`<div class="kb_dropdown__content ">`
						+`<ul class="section-option" style="left: 160px;">`
							+`<li onclick=add("root")><i class="layui-icon">&#xe631;</i>新建下级部门</li>`
						+`</ul>`
               	 	+`</div>`
              		+`</div>`
			+`</div>`
		+`</div>`;
	sectionText+=strAll;
	sectionText+=`</div>`;
	$(".section").html(sectionText);       
	tableBtnOpt();
}
function renderColor(){
	var arr=['#4fc0e8','#da6068','#66c5d5','#70ccb0','#6a9ce7','#a0d468'];
	 var id = Math.floor(Math.random()*(arr.length+1))*1;
	 return arr[id];
}
function editUser(id,event){
	preventBubble(event);//阻止事件冒泡即可，点击tr的
	parent.layer.open({
		title : [ '编辑员工信息'],
		type : 2,
		area : ['650px','90%'],
		shade : [0.6, '#010101'],
		content : [ "/system/org/user/edit/"+id, 'no' ],
		end: function () {
			table.reload('user');
			tableBtnOpt();
	      }
	});
}
function editDel(id,event){
	preventBubble(event);//阻止事件冒泡即可，点击tr的
	parent.layer.confirm('确认要删除吗，删除后不能恢复', function(index){
    	//发送删除请求
    	$.post("/system/org/user/delete",{id:id},function(res){
    		if(res.success){
    			parent.layer.msg(res.msg);
    		}else{
    			parent.layer.msg(res.msg);
    		}
    		parent.layer.close(index);
    		table.reload('user');
    		tableBtnOpt();
        },"json");
  	});	
}
function add(id){
	parent.layer.open({
		  type: 2, 
		  title:"添加部门",
		  area: ['650px','300px'],
	      shade: [0.6, '#010101'],
		  content:"/system/org/dept/add/"+id , //这里content是一个普通的String
		  end: function () {
			 runAsync("/system/org/dept/listdata").then(function(data){//确保拿到数据后渲染导航
				　　renderNav(data)
			 });		  
	      }
		});
}
function upd(id){
	parent.layer.open({
		  type: 2, 
		  title:"修改部门",
		  area: ['650px','300px'],
	      shade: [0.6, '#010101'],
		  content:"/system/org/dept/edit/"+id , //这里content是一个普通的String
		  end: function () {
			 runAsync("/system/org/dept/listdata").then(function(data){//确保拿到数据后渲染导航
				　　renderNav(data)
			 });		  
	      }
		});
}
function del(id){
	parent.layer.confirm('你是否确定删除这个部门？', function(index){
    	//发送删除请求
    	$.post("/system/org/dept/delete",{id:id},function(res){
    		parent.layer.close(index);
    		parent.layer.msg(res.msg);
        	runAsync("/system/org/dept/listdata").then(function(data){//确保拿到数据后渲染导航
				　　renderNav(data)
				  tableBtnOpt();
			 });
        },"json");
  	});
}
function tableBtnOpt(){
	/*  点击删除查元素基于table*/
  	  var $mylist = $("#LAY_table_user").next('.layui-table-view').find('.layui-table-body table.layui-table');
  	  $mylist.on("click",".icon-delete",function(){
  			var targetI=$(this);
  			if($(targetI).hasClass('icon-delete')){
  				$(targetI).parent('a').next(".kb_dropdown__content").show()
  			}
  			return false;
  			//icon-delete
  	  });
  	/*  点击tr元素,跳转详情基于table*/
	  $mylist.on("click",'tr',function(){
			var targetI=$(this);
			//$(this).parent().find("i[isShow='fou']")
			var id=$(targetI).children('td').find("span[data-id]").attr("data-id");
			parent.location.hash='#employeeDetials/'+id;
			parent.getHash()
			return false;
	  }); 
}
/* 阻止事件冒泡 */
function preventBubble(event){ //取消事件冒泡
	  var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容  
	  if (e && e.stopPropagation) {  
	    e.stopPropagation();  
	  } else if (event) {  
	    event.cancelBubble = true;  
	  }  
}
function clearTreeActive(viewitem){
	var nodeTxt=$(viewitem).find(".node").text(),
		dataId=$(viewitem).attr('data-id');
		if(dataId=="all"){
			dataId="";
		}
		top.$("#dataId").val(dataId);
		table.reload('user', {
	        page: {
	          curr: 1 //重新从第 1 页开始
	        }
	        ,where: {
	        	params:{
	        		deptId: dataId
	        	}
	        }
	    });
	$("#name-tit").text(nodeTxt)//标题的改变
	$(".section .tree-view_item").each(function(index,item){
		$(item).removeClass("tree-view_click");
	})
	if(nodeTxt!="全公司"){
		$(viewitem).addClass('tree-view_click');
	} 
	console.log(1);
}

 
</script>
</html>